<template>
  <div class="div" style="border-radius: 10px;">


    <div style="height: 50px">
      <span class="span1 big_title_style">客户数据分析</span>
    </div>

    <div>
      <el-row>
        <el-col :span="12">
          <div id="fans_pie_chart_map"></div>
        </el-col>
        <el-col :span="12">
          <div id="fans_histogram_map"></div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
  import {
    getCustomerRealData,
    getNewlyCustomerMap
  } from '@/api/dataCentre/customerCount.js'
  import echarts from "echarts";
  export default {
//import 引入的组件需要注入到对象中才能使用
    components:{},
    props:{},
    data(){
//这里存数据
      return{
        customerData:[],
        newlyCustomerData:[],
        // 查询参数
        queryParams: {
          //结束日期
          endTime: null ,
          //开始日期
          startTime: null
        },
      };
    },
//计算属性
    computed: {

    },
//监控data中数据变化
    watch: {

    },
//方法
    methods: {
      customerRealData(){
        getCustomerRealData().then((response) => {
          this.customerData = response.data
          this.fansPieChart()

        })


      },
      newlyCustomerMap(){
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        this.queryParams.endTime = end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate()
        this.queryParams.startTime = start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate();
        getNewlyCustomerMap(this.queryParams).then((response) => {
          this.newlyCustomerData = response.data
          this.fansHistogram()
        })
      },

      fansPieChart() {
        let this_ = this;
        let myChart = echarts.init(document.getElementById("fans_pie_chart_map"));
        let option = {
          title: {
            text: '成交客户占比',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '50%',
              data: [
                {value: this.customerData.customerTotal - this.customerData.makeCustomerTotal, name: '未消费客户数'},
                {value: this.customerData.makeCustomerTotal, name: '消费客户数'},
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              color: ["#0072E3","#00BFFF"]
            }
          ]
        }
        myChart.setOption(option);
        //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },

      fansHistogram(){

        let this_ = this;
        let myChart = echarts.init(document.getElementById("fans_histogram_map"));
        let option = {
          title: {
            text: '近七天新增客户数',
            left: 'center'
          },
          xAxis: {
            type: 'category',
            data: this.newlyCustomerData.xaxis.data
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: this.newlyCustomerData.series[0].data,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            color: "#0072E3"
          }]
        }
        myChart.setOption(option);
        //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
    },
//声明周期 - 创建完成（可以访问当前this实例）
    created() {

    },
//生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.newlyCustomerMap()

      this.customerRealData()
    },
    beforeCreate() {},//生命周期 - 创建之前
    beforeMount() {},//生命周期 - 挂载之前
    beforeUpdate() {},//声明周期 - 更新之前
    updated() {},//生命周期 - 更新之后
    beforeDestroy() {},//生命周期 - 销毁之前
    destroyed() {},//生命周期 - 销毁之后
    activated() {},//缓存keep-alive
  }
</script>

<style scoped>

  #fans_pie_chart_map {
    width: 100%;
    height: 500px;

  }
  #fans_histogram_map {
    width: 100%;
    height: 500px;

  }


  .div {
    background: #fff;
    margin: 20px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }

</style>
